<template>
  <div class="Template_rebate_1__layer" data-classname="no-bg"
       :style="{backgroundColor: formData.maskColor, width: ((editorDevice === 'desktop' || editorDevice === 'all') &&  formData.showDevice !== 'mobile') ? '100%' : '400px', transform: ((editorDevice === 'desktop' || editorDevice === 'all') &&  formData.showDevice !== 'mobile') ? 'none': 'scale(0.8)', padding: editorDevice === 'desktop' || editorDevice === 'all' ? 0: '0 20px'}" >
    <div class="Template_rebate_1PcWrap Template_rebate_1__wrap twoChildren_b126 middleWrap" :class="[formData.bgStyle, formData.bgAlignment]"
         :style="{width: ((editorDevice === 'desktop' || editorDevice === 'all') &&  formData.showDevice !== 'mobile') ? '620px' : '95%', position: 'absolute', transform: 'scale(1)', background: `${formData.imageUrl ? `url(${formData.imageUrl}) center center / cover no-repeat scroll` : `linear-gradient(${formData.baseMap1}, ${formData.baseMap2}, ${formData.baseMap2}) center center / cover no-repeat scroll`}`}">
      <div class="Template_rebate_1__title">
        <span v-html="formData.popupTitle"></span>
      </div>
      <div class="Template_rebate_1__couponList">
        <template v-for="(item , index) in  formData.levelJson">
          <div class="Template_rebate_1__coupon" :key="index">
          <span class="Template_rebate_1__coupon_bg" :style="{color: formData.popupColor}"><div><div><svg
              xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150px" height="88px"
              viewBox="0 0 150 88" version="1.1" class="injected-svg"
              data-src="//assets.shoplazza.com/static/coupon_bg.a8ba.svg">
    <title>形状结合</title>
    <g id="最终稿" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="活动层级" transform="translate(-808.000000, -256.000000)" fill="currentColor">
            <path
                d="M958,256 L958,264 C955.238576,264 953,266.238576 953,269 C953,271.761424 955.238576,274 958,274 L958,274 L958,280 C955.238576,280 953,282.238576 953,285 C953,287.761424 955.238576,290 958,290 L958,290 L958,296 C955.238576,296 953,298.238576 953,301 C953,303.761424 955.238576,306 958,306 L958,306 L958,312 C955.238576,312 953,314.238576 953,317 C953,319.761424 955.238576,322 958,322 L958,322 L958,328 C955.238576,328 953,330.238576 953,333 C953,335.761424 955.238576,338 958,338 L958,338 L958,344 L808,344 L808,338 C810.761424,338 813,335.761424 813,333 C813,330.238576 810.761424,328 808,328 L808,328 L808,322 C810.761424,322 813,319.761424 813,317 C813,314.238576 810.761424,312 808,312 L808,312 L808,306 C810.761424,306 813,303.761424 813,301 C813,298.238576 810.761424,296 808,296 L808,296 L808,290 C810.761424,290 813,287.761424 813,285 C813,282.238576 810.761424,280 808,280 L808,280 L808,274 C810.761424,274 813,271.761424 813,269 C813,266.238576 810.761424,264 808,264 L808,264 L808,256 L958,256 Z"
                id="形状结合-13"></path>
        </g>
    </g>
</svg></div></div></span>
            <div class="Template_rebate_1__coupon_content" style="transform: scale(1);">
              <div style="text-align: center;font-family: Lato, Lato-Regular;white-space: nowrap;"
                   data-mce-style="text-align: center; font-family: Lato, Lato-Regular;white-space: nowrap;"
                   v-html="paraseHtml(formData.programme, item)">
              </div>
            </div>
            <div class="Template_rebate_1__coupon_dashed"></div>
          </div>
        </template>
      </div>
      <div class="Template_rebate_1__mainBtn"
           :style="{backgroundColor: formData.btnBackgroundColor, borderColor: formData.btnBorderColor}"
           v-html="formData.btnText">
      </div>
      <div class="Template_rebate_1__declaration">
        <span v-html="formData.description"></span>
      </div>
      <i @click="handleClose" class="jyfont card-col-close icon_custom Template_rebate_1__close-icon el-icon-close"
         :style="{color: formData.btnColor}"></i></div>
    <div class="Template_rebate_1__mode_edit_03ef"></div>
  </div>
</template>

<script>

import {mapGetters} from 'vuex';
import { currency } from '@/utils/filters';

export default {
    name: 'SubscriptionPopups',
    props: {
        formData: {
            type: Object,
            default: () => ({})
        },
        deviceName: {
            type: String,
            default: 'desktop'
        }
    },
    watch: {
        deviceName (newValue) {
            this.editorDevice = newValue;
        },
        editor (newValue) {
            this.editorDevice = newValue;
        }
    },
    data () {
        return {
            editorDevice: 'all'
        };
    },
    computed: {
        ...mapGetters({editor: 'editorDevice', siteList: 'siteList'}),
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            return info;
        },
        siteId () {
            return this.$store.state.user.siteId;
        }
    },
    methods: {
        paraseHtml (html, item) {
            html = html.replace('{{amount}}', currency(item.fullValue, this.siteInfo.currencySymbol || '$'));
            if (this.formData.priceReduceType === 1) {
                html = html.replace('{{rebate}}', currency(item.lessValue, this.siteInfo.currencySymbol || '$'));
            } else {
                html = html.replace('{{rebate}}', item.lessValue + '%');
            }
            return html;
        },
        handleClose () {
            this.$emit('close');
        }
    }
};
</script>

<style scoped lang="scss">
.Template_rebate_1__layer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 900px;
  overflow: hidden;

  .Template_rebate_1PcWrap {
    position: relative;
    border-radius: 4px;
    padding: 30px 0;
    z-index: 3;

    .Template_rebate_1__title {
      color: white;
      text-align: center;
      z-index: 3;
      width: 80%;
      margin: 0 auto;
      word-break: break-word;
    }

    .Template_rebate_1__couponList {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }

    .Template_rebate_1__coupon {
      width: 150px;
      height: 88px;
      position: relative;
      margin-top: 24px;
      margin-right: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 6px 12px;
    }

    .Template_rebate_1__coupon_bg {
      position: absolute;
      display: block;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
    }

    .Template_rebate_1__mainBtn {
      width: 324px;
      height: 40px;
      background: #fff3be;
      border-radius: 4px;
      line-height: 40px;
      margin: 0 auto;
      text-align: center;
      font-size: 16px;
      color: #ff0022;
      cursor: pointer;
      margin-top: 40px;
      border-width: 1px;
      border-style: solid;
      padding: 0 20px;
    }

    .Template_rebate_1__declaration {
      font-size: 14px;
      padding-top: 14px;
      text-align: center;
      color: #ffffff;
      width: 70%;
      margin: 0 auto;
      word-wrap: break-word;
    }

    i.Template_rebate_1__close-icon {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 20px;
      height: 20px;
      line-height: 16px;
      font-size: 14px;
      color: #fff;
      cursor: pointer;
    }
  }

  .Template_rebate_1__mode_edit, .Template_rebate_1__mode_preview {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}

.bg-selfAdaption {
  background-repeat: no-repeat!important;
  background-size: auto 100% !important;
}
.bg-fill {
  background-repeat: repeat!important;
  background-size: 100% auto !important;
}
.bg-stretching {
  background-repeat: repeat!important;
  background-size: 100% 100% !important;
}
.bg-tile {
  background-repeat: repeat!important;
  background-size: auto !important;
}
.bg-center {
  background-position: center center !important;
}
.bg-left-top {
  background-position: left top !important;
}
.bg-right-top {
  background-position: right top !important;
}
.bg-left-bottom {
  background-position: left bottom !important;
}
.bg-right-bottom {
  background-position: right bottom !important;
}

</style>
<style lang="scss">
.Template_rebate_1__mainBtn {
  p {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
  }
}

.Template_rebate_1__coupon_content {
  p {
    margin: 0;
  }
}
</style>
